<template>
	<view>
		<view style="display: flex;padding: 10px;">
			<image :src="data.icon" style="width: 70px;height: 70px;border-radius: 10px;"></image>
			<view style="margin-left: 10px;">
				<p style="font-size: 20px;font-weight: 800;">{{data.title}}</p>
				<p style="color: #828282;font-size: 16px;">V.{{data.version}}</p>
				<p style="color: #828282;font-size: 16px;">{{data.package}}</p>
			</view>
			<view style="flex: 1;display: flex;align-items: center;justify-content: flex-end;">
				<button size="mini" type="primary" style="margin: 0;" @click="down(data._id)">获取</button>
			</view>
		</view>
		<view style="height: 1px;margin: 10px;background-color: #d8d8d8;" />
		<view style="display: flex;align-items: center;justify-content: space-around;">
			<view style="text-align: center;color: #939393;">
				<p style="font-size: 12px;">99亿评分</p>
				<p style="font-size: 20px;font-weight: 600;">5.0</p>
				<p style="font-size: 12px;">★★★★★</p>
			</view>
			<view style="width: 1px;height: 40px;background-color: #d8d8d8 ;" />
			<view style="text-align: center;color: #939393;">
				<p style="font-size: 12px;">年龄</p>
				<p style="font-size: 20px;font-weight: 600;">12+</p>
				<p style="font-size: 12px;">岁</p>
			</view>
			<view style="width: 1px;height: 40px;background-color: #d8d8d8 ;" />
			<view style="text-align: center;color: #939393;">
				<p style="font-size: 12px;">排行榜</p>
				<p style="font-size: 20px;font-weight: 600;">#1</p>
				<p style="font-size: 12px;">应用</p>
			</view>
			<view style="width: 1px;height: 40px;background-color: #d8d8d8 ;" />
			<view style="text-align: center;color: #939393;">
				<p style="font-size: 12px;">大小</p>
				<p style="font-size: 20px;font-weight: 600;">{{data.size.replace("MB",'')}}</p>
				<p style="font-size: 12px;">MB</p>
			</view>
		</view>
		<scroll-view class="scroll-view_H" scroll-x="true">
			<image @click="openImg(data.image,index)" v-for="(item,index) in data.image"
				style="width: 150px;border-radius: 5px;margin: 10px 5px;" mode="widthFix" :src="item">
			</image>
		</scroll-view>
		<view style="margin: 10px;display: flex;align-items: center;justify-content: space-between;">
			<view style="display: flex;align-items: center;">
				<uni-icons type="location" size="28"></uni-icons>
				<p style="font-size: 14px;">中国</p>
			</view>
			<p style="font-size: 14px;color: red;" @click="report(data._id,data.title)">举报</p>
		</view>
		<view style="height: 1px;margin: 10px;background-color: #d8d8d8;" />
		<view v-if="data.content!=null&&data.content!=''" style="padding: 10px;">
			<rich-text selectable :nodes="data.content"></rich-text>
		</view>
		<view style="height: 1px;margin: 10px;background-color: #d8d8d8;" />
		<view style="padding:10px;">
			<view style="display: flex;">
				<view style="width: 45%;">
					<h3>评分及评论</h3>
					<p style="font-weight: 800;font-size: 35px;">5.0<span style="font-size: 14px;color: #858585;">
							满分5分</span></p>
				</view>
				<view style="width: 55%;font-size: 12px;">
					<view style="display: flex;align-items: center;">
						<p style="color: #7a7a7a;margin-right: 5px;">★★★★</p>
						<view style="background-color: #7a7a7a;width: 100%;height: 5px;border-radius: 99px;" />
					</view>
					<view style="display: flex;align-items: center;">
						<p style="color: #7a7a7a;margin-right: 5px;">★★★</p>
						<view style="background-color: #e3e3e3;width: 100%;height: 5px;border-radius: 99px;" />
					</view>
					<view style="display: flex;align-items: center;">
						<p style="color: #7a7a7a;margin-right: 5px;">★★</p>
						<view style="background-color: #e3e3e3;width: 100%;height: 5px;border-radius: 99px;" />
					</view>
					<view style="display: flex;align-items: center;">
						<p style="color: #7a7a7a;margin-right: 5px;">★</p>
						<view style="background-color: #e3e3e3;width: 100%;height: 5px;border-radius: 99px;" />
					</view>
				</view>
			</view>
		</view>
		<view style="display: flex;align-items: center;margin: 10px;">
			<view style="background-color: #f2f1f7;padding: 10px;width: 50%;border-radius: 7px;margin-right: 5px;">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<p style="font-weight: 800;font-size: 16px;">软件太好用了</p>
					<p style="font-size: 12px;color: #828282;">刚刚</p>
				</view>
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<p style="font-weight: 800;font-size: 16px;color: #fd7a08;">★★★★★</p>
					<p style="font-size: 12px;color: #828282;">王五</p>
				</view>
				<p>App非常人性化。非常注重用户体验。必须五星好评！</p>
			</view>
			<view style="background-color: #f2f1f7;padding: 10px;width: 50%;border-radius: 7px;margin-left: 5px;">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<p style="font-weight: 800;font-size: 16px;">真实体验感受</p>
					<p style="font-size: 12px;color: #828282;">刚刚</p>
				</view>
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<p style="font-weight: 800;font-size: 16px;color: #fd7a08;">★★★★★</p>
					<p style="font-size: 12px;color: #828282;">张三</p>
				</view>
				<p>不知不觉用了十年了，非常nice！强烈推荐！！！</p>
			</view>
		</view>
		<view style="height: 1px;margin: 10px;background-color: #d8d8d8;" />
		<view style="padding: 10px;">
			<h3>信息</h3>
			<view style="display: flex;justify-content: space-between;margin-top: 10px;">
				<view style="width: 50%;">
					<p style="color: #7a7a7a;">供应商</p>
					<p>小二网络</p>
				</view>
				<view style="width: 50%;">
					<p style="color: #7a7a7a;">大小</p>
					<p>{{data.size}}</p>
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;margin-top: 10px;">
				<view style="width: 50%;">
					<p style="color: #7a7a7a;">兼容性</p>
					<p>可在此设备使用</p>
				</view>
				<view style="width: 50%;">
					<p style="color: #7a7a7a;">年龄分级</p>
					<p>12+</p>
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;margin-top: 10px;margin-bottom: 10px;">
				<view style="width: 50%;">
					<p style="color: #7a7a7a;">语言</p>
					<p>简体中文</p>
				</view>
				<view style="width: 50%;">
					<p style="color: #7a7a7a;">发布时间</p>
					<p>{{$u.timeFrom(new Date(data.time).getTime(),false)}}</p>
				</view>
			</view>
		</view>
		<websitenav></websitenav>
	</view>
</template>

<script>
	import ase from '@/common/ar-aes/ar-aes.js'
	export default {
		props: {
			data: {
				type: Object,
				default (data) {
					return {}
				}
			}
		},
		name: "apk_ios",
		methods: {
			report(id, title) {
				uni.navigateTo({
					url: '../feedback/feedback?id=' + id + '&type=file'
				});
			},
			down(id) {
				this.$emit("down", {
					id: id
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: white;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
</style>